@model Sio.Cms.Lib.ViewModels.SioPages.ReadMvcViewModel
@{
    string culture = ViewBag.culture;
    var social = SioCmsHelper.GetModule("Social", ViewBag.culture);
}
<div class="wrapper">
    
    <div class="page-header page-header-small">
        <div class="page-header-image" data-parallax="true" style="background-image: url('@Model.Image');">
        </div>
        <div class="content-center">
            <div class="row">
                <div class="col-md-8 ml-auto mr-auto text-center">
                    <h2 class="title">
                        @Model.Title
                    </h2>
                    <p class="description">
                        @Model.Excerpt
                    </p>
                    
                </div>
            </div>
        </div>
    </div>
    <!--     *********    END BLOGS 4      *********      -->
    <div class="blogs-4" id="blogs-4">
        <div class="container">
            <div class="row">
                <div class="col-md-8 ml-auto mr-auto">
                    @foreach (var nav in Model.Articles.Items)
                    {
                        var product = nav.Article;
                        <div class="card card-plain card-blog">
                            <div class="card-image">
                                <a href="@product.DetailsUrl">
                                    <img class="img img-raised rounded" src="@product.ImageUrl" />
                                </a>
                            </div>
                            <h3 class="card-title">
                                <a href="@product.DetailsUrl">@product.Title</a>
                            </h3>
                            <h5 class="card-description">
                                @Html.Raw(product.Excerpt)
                            </h5>
                            <a href="@product.DetailsUrl" class="btn btn-primary btn-round">Read More</a>
                        </div>
                    }
                </div>
                
            </div>
            <div class="row">
                <div class="col-md-8 ml-auto mr-auto">
                    @if (Model.Articles.TotalPage > 1)
                    {
                        <div class="tr-pagination text-center">
                            <ul class="pagination" style="display: inline-flex!important;">
                                @if (Model.Articles.PageIndex > 0)
                                {
                                    <li class="float-left page-item">
                                        <a class="page-link"
                                           asp-controller="@ViewContext.RouteData.Values["Controller"]"
                                           asp-action="@ViewContext.RouteData.Values["Action"]"
                                           asp-route-pageIndex="@(Model.Articles.PageIndex-1)">
                                            Previous
                                        </a>
                                    </li>
                                }
                                @for (int i = 0; i < Model.Articles.TotalPage; i++)
                                {
                                    string cl = i == Model.Articles.PageIndex ? "active" : string.Empty;
                                    <li class="@cl  page-item">
                                        <a class="page-link"
                                           asp-controller="@ViewContext.RouteData.Values["Controller"]"
                                           asp-action="@ViewContext.RouteData.Values["Action"]"
                                           asp-route-pageIndex="@i">
                                            @(i + 1)
                                        </a>
                                    </li>
                                }
                                @if (Model.Articles.PageIndex < Model.Articles.TotalPage - 1)
                                {
                                    <li class="float-right page-item">
                                        <a class="page-link"
                                           asp-controller="@ViewContext.RouteData.Values["Controller"]"
                                           asp-action="@ViewContext.RouteData.Values["Action"]"
                                           asp-route-pageIndex="@(Model.Articles.PageIndex+1)">
                                            Next
                                        </a>
                                    </li>
                                }
                            </ul>
                        </div>
                   }
                </div>
            </div>
        </div>
    </div>
</div>
